
<script>
    const DEFAULT_COLORS = [
        '#19d4ae', '#5ab1ef', '#fa6e86',
        '#ffb980', '#0067a6', '#c4b4e4',
        '#d87a80', '#9cbbff', '#d9d0c7',
        '#87a997', '#d49ea2', '#5b4947',
        '#7ba3a8'
    ];

    export default {
        getPieOptions({name, data, toolTipFmt}) {
            const length = data.length;
            const colorArr = [];
            for(let i = 0 ; i < length ; i ++) {
                colorArr.push(DEFAULT_COLORS[i]);
            }

            return {
                color: colorArr,
                legend: {
                    textStyle: {
                        color: colorArr
                    }
                },
                tooltip : {
                    show: true,
                    trigger: 'item',
                    formatter: toolTipFmt != null ? toolTipFmt :  "{b}: {c}  ({d}%)",
                    textStyle:{
                        align:'left'
                    }
                },
                series : [
                    {
                        name: name,
                        type: 'pie',
                        data: data,
                        label: {
                            normal: {
                                textStyle: {
                                    color: 'rgba(255, 255, 255, 0.6)'
                                }
                            },
                            emphasis: {
                                textStyle: {
                                    color: 'rgba(255, 255, 255)'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                textStyle: {
                                    color: 'rgba(255, 255, 255, 0.6)'
                                }
                            },
                            emphasis: {
                                textStyle: {
                                    color: 'rgba(255, 255, 255)'
                                }
                            }
                        }
                    }
                ]
            };
        },

        getLineOptions({xAxis, yAxis, dataArr, toolTipFmt}) {
            const length = dataArr.length;
            const colorArr = [];
            const seriesArr = [];
            for(let i = 0 ; i < length ; i ++) {
                colorArr.push(DEFAULT_COLORS[i]);
                seriesArr.push({
                    name: dataArr[i]['name'],
                    data: dataArr[i]['data'],
                    type: 'line'
                });
            }

            return {
                legend: {
                    textStyle: {
                        color: colorArr
                    }
                },
                color: colorArr,
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: toolTipFmt,
                    textStyle:{
                        align:'left'
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.6)'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: 'rgba(255, 255, 255)'
                        }
                    }
                },
                xAxis: Object.assign({
                    axisLabel:{color:'rgb(255,255,255)'},
                    axisLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    axisTick:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    splitLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    minorSplitLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                }, xAxis),
                yAxis: Object.assign({
                    axisLabel:{color:'rgb(255,255,255)'},
                    axisLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    axisTick:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    splitLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    minorSplitLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                }, yAxis),
                series: seriesArr,
            };
        },

        getBarOptions({xAxis, yAxis, dataArr, toolTipFmt}) {
            const length = dataArr.length;
            const colorArr = [];
            const seriesArr = [];
            for(let i = 0 ; i < length ; i ++) {
                colorArr.push(DEFAULT_COLORS[i]);
                seriesArr.push({
                    name: dataArr[i]['name'],
                    data: dataArr[i]['data'],
                    type: 'bar'
                });
            }

            return {
                legend: {
                    textStyle: {
                        color: colorArr
                    }
                },
                color: colorArr,
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: toolTipFmt,
                    textStyle:{
                        align:'left'
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.6)'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: 'rgba(255, 255, 255)'
                        }
                    }
                },
                xAxis: Object.assign({
                    axisLabel:{
                        color:'rgb(255,255,255)',
                    },
                    axisLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    axisTick:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    splitLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    minorSplitLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                }, xAxis),
                yAxis: Object.assign({
                    axisLabel:{color:'rgb(255,255,255)'},
                    axisLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    axisTick:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    splitLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                    minorSplitLine:{
                        lineStyle:{color:'rgb(255,255,255)'}    // x轴刻度的颜色
                    },
                }, yAxis),
                series: seriesArr,
            };
        }
    }
</script>